<!--
 * @Description: 
 * @Author: mxy
 * @Date: 2022-11-30 16:31:48
 * @LastEditors: mxy
 * @LastEditTime: 2022-12-03 20:29:38
-->
<template>
  <div>
    <h1>自定义指令</h1>
    <p v-color="'pink'" v-hi="'30px'">{{ uname }}</p>
    <input v-focus type="text" />
    <my-left :uname="uname"></my-left>
  </div>
</template>

<script>
import MyLeft from "@/components/MyLeft.vue";
export default {
  components: { MyLeft },
  data() {
    return {
      uname: "mxy",
    };
  },
  directives: {
    color: {
      bind(el, obj) {
        el.style.color = obj.value;
      },
    },
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
</style>